<template>
  <div class="wrap">
    <Top Top="精彩跟帖" />
    <van-list v-model="loading" 
    :finished="finished" 
    finished-text="没有更多了" 
    @load="onLoad"
    :immediate-check= "false">
      <div class="parentWrap" v-for="item in commentList" :key="item.id">
        <CommentParent v-if="item" :parentData="item" 
          @clicked="changeText"
         />
      </div>
    </van-list>

    <!-- 底部栏 -->
    <div class="bottom" v-if="isShow == true">
      <div class="enable">
         <textarea 
          ref="textarea"
          @blur="collectText"
          v-model="inputValue"
         class="comment" name id cols="20" rows="1" placeholder="写跟帖"></textarea>
         <button class="sell" @click="sellText">发送</button>
      </div>
    </div>
  </div>
</template>

<script>
// 引入顶部组件
import Top from "@/components/Top";

// 引入子组件评论
import CommentParent from "@/components/comments/CommentsParent";

export default {
  components: {
    Top,
    CommentParent,
  },
  data() {
    return {
      commentList: [],
      loading: false,
      finished: false,
      pageSize: 4,
      pageIndex: 1,
      isShow: false,
      inputValue:'',
      textId:'',
    };
  },
  created() {
    this.init();
  },

  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        this.$axios({
          method: "get",
          params: {
            pageSize: this.pageSize,
            pageIndex: this.pageIndex+=1,
          },
          url: "/post_comment/" + this.$route.query.id,
        }).then((res) => {
          // console.log(res);
          this.commentList = [
              ...this.commentList,
              ...res.data.data,
          ];
          this.loading = false;
          if(res.data.data.length<this.pageSize){
              this.finished = true;
          }
        });
      
      }, 1000);
    },

    // 弹出评论框
    changeText(id){
      // console.log('点击了');
      // console.log(id);
      this.isShow = true
      this.textId = id;
       this.$nextTick(()=>{
         this.$refs.textarea.focus();
       })
    },

    // 获取评论页面
    init(){
      // 评论列表
     // 接口类型:【GET】
     // 接口地址:/post_comment/:id
     // 参数 : id
      // console.log(this.pageIndex);
    this.$axios({
      method: "get",
      params: {
        pageSize: this.pageSize,
        pageIndex: this.pageIndex,
      },
      url: "/post_comment/" +this.$route.query.id,
    }).then((res) => {
      // console.log(res);
      this.commentList = res.data.data;
    });
    },

     // 发布评论
     sellText(){
    // 发布评论
    // 接口类型:【POST】
    // 需要验证:【Authorization 】
    // 接口地址: /post_comment/:id
    // 参数 : :id(文章id)   content(评论内容) parent_id(回复id)

      //  console.log('点击了');
      //  console.log(this.textId);
      //  console.log(this.$route.query.id);
      //  console.log(this.inputValue);
       this.$axios({
         method:'post',
         url:'/post_comment/'+this.$route.query.id,
         data:{
            content: this.inputValue,
            parent_id: this.textId
         }
       })
       .then(res=>{
         console.log(res);
         this.pageIndex = 1
         this.init();
         this.inputValue='';
         this.isShow = false;
         document.querySelector(".wrap").scrollIntoView();
       })

    },

    // 收起弹框
    collectText(){
      // console.log('失去焦点');
      setTimeout(()=>{
        this.isShow = false
      },1000)
    },

   
  },
  
};
</script>

<style lang="less" scoped>
.wrap {
  width: 100%;
 
  // 底部栏
  .bottom {
    padding: 0 20/360 * 100vw;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    
    .enable {
      height: 120/360*100vw;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .comment {
        height: 80/360 * 100vw;
        padding: 10/360 * 100vw 20/360 * 100vw;
        outline: none;
        border: transparent;
        background-color: #d7d7d7;
        border-radius: 20/360 * 100vw;
      }

      .sell {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80/360*100vw;
        height: 40/360*100vw;
        margin-top: 40/360*100vw;
        background-color: red;
        color: white;
        border: transparent;
        border-radius: 20/360*100vw;
      }
    }
  }
}
</style>